<template>
    <z-paging
        ref="paging"
        :refresher-out-rate="0.8"
        :show-empty-view-reload-when-error="false"
        :empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
        empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
        empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
        empty-view-error-text="暂无数据"
        safe-area-inset-bottom
        bg-color="#F5F8FE"
        v-model="dataList"
        @query="queryList"
    >
        <view class="siginPage" slot="top">
            <view
                class="search_t"
                style="display: flex; justify-content: space-between"
            >
                <view class="" style="width: 540rpx; margin: 12rpx 0 0 40rpx">
                    <u-input
                        prefixIcon="search"
                        border="none"
                        prefixIconStyle="font-size: 22px;color: #909399"
                        placeholder="请输入搜索标题"
                        v-model="searchValue"
                        clearable
                    ></u-input>
                </view>
                <view
                    style="
                        width: 104rpx;
                        height: 64rpx;
                        background: #588bf3;
                        border-radius: 0px 64rpx 64rpx 0px;
                        color: #fff;
                        line-height: 64rpx;
                        font-size: 28rpx;
                        font-weight: bold;
                        text-align: center;
                    "
                    @click="search"
                    >搜索</view
                >
            </view>
        </view>
        <view class="cellBox">
            <view
                class="detail"
                v-for="(item, index) in dataList"
                :key="index"
                @click="toSignDetail(item.meetSignId, item.id, item.eventType)"
            >
                <view class="detail_title">
                    <view class="detail_title_right">
                        <u-icon
                            name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/04/17/6d80da266b434d3e8ceabda7597be108.png"
                            size="40rpx"
                        />
                        <u-text
                            :text="item.theme"
                            bold
                            size="36rpx"
                            color="#333"
                            margin="0 16rpx 0 20rpx"
                        />
                        <u-icon
                            v-if="item.eventType == 'Sign In'"
                            name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/04/17/7abb8493d778424c9bca95a547734279.png"
                            width="124rpx"
                            height="40rpx"
                        />
                        <u-icon
                            v-if="item.eventType == 'Sign Up'"
                            name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/04/17/01e1351a6a4043cda311c38221a32b50.png"
                            width="124rpx"
                            height="40rpx"
                        />
                    </view>
                    <u-icon
                        name="arrow-right"
                        size="36rpx"
                        color="#588BF3 "
                        bold
                    />
                </view>
                <view class="detail_time flex_wrap">
                    <view class="imageWrap">
                        <u-image
                            height="144rpx"
                            width="144rpx"
                            :src="
                                item.picture ||
                                'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/06/24/8853a0e670f24e83a58134d7815b3015.png'
                            "
                            mode="aspectFill"
                            radius="16rpx"
                        />
                    </view>
                    <view>
                        <view class="detail_time_address">
                            <u-icon name="map" size="36rpx" color="#0972E7" />
                            <u-text
                                :text="`${item.addressName || ''}${
                                    item.address
                                }`"
                                bold
                                size="28rpx"
                                color="#333"
                                margin="0 0 0 10rpx"
                                lines="1"
                            />
                        </view>
                        <view class="detail_time_now">
                            <u-icon name="clock" size="34rpx" color="#0972E7" />
                            <u-text
                                :text="`${$u.timeFormat(
                                    item.startTime,
                                    'yy/mm/dd hh:MM'
                                )} - ${$u.timeFormat(
                                    item.endTime,
                                    'yy/mm/dd hh:MM'
                                )}`"
                                color="#588BF3"
                                size="26rpx"
                                margin="0 0 0 10rpx"
                            />
                        </view>
                    </view>
                </view>
                <!-- <view
                    v-if="item.eventType == 'Sign In'"
                    class="flex_wrap row_between drawALottery"
                    @click="to_userDrawALottery(item)"
                >
                    <u-text
                        prefixIcon="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/04/18/6115776ca37d4675a9d85ce4fb429956.png"
                        iconStyle="width:40rpx;height:36rpx;margin-right:20rpx;color:#0972E7"
                        text="现场活动"
                        color="#333333"
                        size="28rpx"
                        bold
                    />
                    <view class="drawALottery_btn">去抽奖</view>
                </view> -->
            </view>
        </view>
    </z-paging>
</template>

<script>
import {
    getHistoryMeet,
    getMeetingWithSalesMan,
    getCustomerSignUp,
    recentlyDrawALottery,
} from "@/api/sign_in.js";
export default {
    data() {
        return {
            searchValue: "", //搜索关键词
            dataList: [1, 2, 3, 4, 5],
        };
    },
    methods: {
        to_userDrawALottery(item) {
            recentlyDrawALottery(item.meetId, 2).then((res) => {
                if (res.data.length) {
                    uni.$u.route({
                        url: "/pages_initiateMeeting/userDrawALottery/index",
                        params: {
                            meetId: item.meetId,
                        },
                    });
                } else {
                    uni.$u.toast("暂无抽奖，敬请期待~");
                }
            });
        },
        toSignDetail(meetSignId, id, eventType) {
            console.log(meetSignId, id, eventType);
            if (eventType == "Sign In") {
                getMeetingWithSalesMan(meetSignId)
                    .then((res) => {
                        if (res.code === 200) {
                            uni.$u.route({
                                url: "/pages_signin/index/index",
                                params: {
                                    scene: meetSignId,
                                },
                            });
                        } else {
                            uni.$u.sleep(2000).then(() => {
                                this.$refs.paging.reload();
                            });
                        }
                    })
                    .catch((error) => {});
            } else if (eventType == "Sign Up") {
                getCustomerSignUp(id)
                    .then((res) => {
                        uni.$u.route({
                            url: "/pages_signin/index/up",
                            params: {
                                customerSignUpId: id,
                            },
                        });
                    })
                    .catch((error) => {});
            }
        },
        search() {
            this.$refs.paging.reload();
            this.$refs.paging.scrollToTop();
        },
        async queryList(pageNo, pageSize) {
            const that = this;
            const params = {
                pageSize: pageSize,
                pageNum: pageNo,
                query: this.searchValue,
            };
            that.pageLoading = true;
            await getHistoryMeet(params)
                .then((res) => {
                    this.$refs.paging.completeByNoMore(res.data.rows, false);
                })
                .catch((error) => {
                    that.$refs.paging.complete(false);
                })
                .finally(() => {
                    that.pageLoading = false;
                });
        },
    },
};
</script>

<style scoped lang="scss">
.search_t {
    margin: 36rpx 28rpx 20rpx;
    width: 694rpx;
    height: 64rpx;
    background: #e1e1e1;
    border-radius: 64rpx;
}
.siginPage {
    display: flex;
    flex-direction: column;
    .signBox {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 44vh;

        &_signButton {
            width: 380rpx;
            height: 380rpx;
            background-color: $uni-color-primary;
            border-radius: 100px;
            box-shadow: 0 0 30rpx $uni-color-primary;
            display: flex;
            align-items: center;
            justify-content: center;
            &_hoverClass {
                opacity: 0.7;
                transition: 300ms;
            }
        }
    }
    .consultantBox {
        display: flex;
        justify-content: space-between;
        padding: 24rpx;
        box-sizing: border-box;
        // box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.08);

        &_title {
            display: flex;
            align-items: center;
            &_border {
                width: 10rpx;
                background-color: $uni-color-primary;
                height: 32rpx;
            }

            &_text {
                padding-left: 14rpx;
            }
        }
    }
}
.cellBox {
    width: 92vw;
    margin: 0 auto;
    ::v-deep .u-cell {
        box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.08);
        margin-top: 32rpx;
        border-radius: 20upx;
    }
    ::v-deep .u-cell__body {
        // padding: 10 15rpx !important;
    }
}
.drawALottery {
    padding: 10rpx 32rpx 0 40rpx;
    &_btn {
        width: 148rpx;
        height: 48rpx;
        background: #588bf3;
        border-radius: 8rpx;
        text-align: center;
        line-height: 48rpx;
        font-size: 28rpx;
        color: #ffffff;
    }
}
.detail {
    width: 100%;
    padding: 20rpx 0;
    box-sizing: border-box;
    border-radius: 20rpx;
    margin: 10rpx auto 30rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);

    &_title {
        width: 100%;
        padding: 8rpx 24rpx 20rpx;
        box-sizing: border-box;
        border-bottom: 1rpx solid #dfdfdf;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &_right {
            display: flex;
            align-items: center;
        }
    }
    &_time {
        padding: 30rpx 32rpx 12rpx;
        &_now {
            padding: 0 12rpx;
            margin-top: 24rpx;
            height: 76rpx;
            background: #eef9ff;
            border-radius: 4rpx;
            display: flex;
            align-items: center;
        }
        &_address {
            padding-left: 12rpx;
            display: flex;
            align-items: center;
        }
    }
}
.imageWrap {
    width: 144rpx;
    height: 144rpx;
    border-radius: 16rpx;
    margin-right: 10rpx;
}
</style>
